<template>
  <div>
    <span>当前位置:个人记录>></span>
    <div style="margin-top: 30px">
      <el-form
        :inline="true"
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-form-item label="搜索日期" prop="Time">
          <el-date-picker
            v-model="dataForm.Time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="姓名:">
          <el-input placeholder="姓名" v-model="dataForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="deptId">
          <el-cascader
            placeholder="点击选择上级部门"
            :options="deptList"
            v-model="dataForm.deptId"
            :props="deptListTreeProps"
            filterable
            change-on-select
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="small" @click="dataFormSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table :data="dataList" border style="width: 100%;">
          <el-table-column
            align="center"
            type="index"
            header-align="center"
            min-width="150"
            label="ID"
          />
          <el-table-column
            align="center"
            prop="deptName"
            header-align="center"
            min-width="150"
            label="查询类型名称"
          />
          <el-table-column align="center" header-align="center" min-width="150" label="时间">
            <template>{{dataForm.Time.join('至')}}</template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="total"
            header-align="center"
            min-width="150"
            label="答题数"
          />
          <el-table-column
            align="center"
            prop="correct"
            header-align="center"
            min-width="150"
            label="正确数"
          />
          <el-table-column
            align="center"
            prop="errer"
            header-align="center"
            min-width="150"
            label="错误数"
          />
          <el-table-column
            align="center"
            prop="accuracy"
            header-align="center"
            min-width="150"
            label="正确率（%）"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { treeDataTranslate } from '@/utils'

export default {
  name: 'information',
  data() {
    return {
      deptList: [],
      dataList: [],
      dataForm: {
        Time: [],
        realname: '',
        deptId: []
      },
      deptListTreeProps: {
        checkStrictly: true,
        expandTrigger: 'hover',
        label: 'name',
        value: 'id',
        children: 'children'
      },
      show2: false,
      dataRule: {
        Time: [
          { required: true, message: '搜索时间不能为空', trigger: 'change' }
        ],
        deptId: [{ required: true, message: '部门不能为空', trigger: 'change' }]
      }
    }
  },
  mounted() {
    this.getdeptList()
  },
  methods: {
    getdeptList() {
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/dept/select'),
        method: 'post'
      }).then(data => {
        for (let i = 0; i < data.data.length; i++) {
          if (data.data[i].deptId === -1) {
            data.data.splice(i, 1)
          }
        }
        this.deptList = data.data
        // this.deptList = this.deptList.splice(0, 1)
        this.deptList = treeDataTranslate(this.deptList, 'id')
      })
    },
    dataFormSubmit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/statistics/quesDailyUserStatistics'),
            method: 'post',
            data: {
              startTime: this.dateTime(this.dataForm.Time[0]),
              endTime: this.dateTime(this.dataForm.Time[1]),
              deptId: this.dataForm.deptId.length
                ? this.dataForm.deptId[0]
                : '',
              realname: this.dataForm.realname
            }
          })
            .then(data => {
              if (data && data.code === 200) {
                this.dataList = data.data
              } else {
                this.dataList = []
              }
            })
            .catch(() => {})
        }
      })
    },
    // 日期转为时间戳
    dateTime(value) {
      // let val =
      //   value.toLocaleDateString().replace(/\//g, "-") +
      //   " " +
      //   value.toTimeString().substr(0, 8);
      let val = new Date(value).getTime()
      return val
    },
    // 菜单树选中
    deptListTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptName = data.name
      this.dataForm.deptId = data.id
    },
    // 菜单树设置当前选中节点
    deptListTreeSetCurrentNode() {
      this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
      this.dataForm.deptName = (this.$refs.deptListTree.getCurrentNode() || {})['name']
    }
  }
}
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
